<template>
  <div class="channel-edit-container">
    <!-- 我的频道标题 -->
    <van-cell title="我的频道">
      <template #default>
        <van-button
          plain
          round
          type="danger"
          size="mini"
          class="edit-btn"
          @click="isEdit = !isEdit"
        >{{ isEdit ? "完成":"编辑" }}</van-button>
      </template>
    </van-cell>

    <!-- 我的频道宫格 -->
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        class="channel-item"
        :class="{ active_red: active === index }"
        v-for="(channel, index) in myChannels"
        :key="channel.id"
        :icon="(isEdit && index !== 0) ? 'close' : ''"
        :text="channel.name"
        @click="onChannelClick(index, channel.id)"
      />
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell title="频道推荐"></van-cell>

    <!-- 频道推荐宫格 -->
    <van-grid :gutter="8" class="recommend-grid">
      <van-grid-item
        class="channel-item"
        v-for="value in recommendChannels"
        :key="value.id"
        icon="plus"
        :text="value.name"
        @click="onAddChannel(value)"
      />
    </van-grid>
  </div>
</template>

<script>
/*
  目标3: 实现频道编辑中的增加，删除，切换操作
  1. 当点击频道推荐中的选项时，将该选项添加到我的频道中（问题： 需不需要删除推荐频道中的当前选项？ =》 不需要）
  2. 实现删除和切换频道
  2.1 点击编辑、完成按钮，实现删除和切换频道的操作, 只有在编辑状态时，才显示删除图标
  2.2 当为非编辑状态时，点击选项为切换操作
  - 点击选项时，切换了首页的频道选项 active
  - 同时会关闭弹框
  2.3 当为编辑状态时，点击选项为删除操作
  - 推荐频道不能删除（不能有删除图标）
  - 点击选项，将当前选项冲myChannels列表中删除
  - 当删除选项的索引位置小于等于当前高亮选项的索引位置时， active需要 减1
*/

/*
  需求1： 新增删除频道时的数据处理
  1. 判断用户是否登录 => $store.state.user.token
  2. 如果已登录，则调用接口，进行新增操作
  3. 如果未登录，则进行本地存储
*/

/*
  需求2：获取频道列表逻辑修改
  业务场景
  1. $store.state.user.token 存在时   => 已登录， 携带token调用查询接口
  2. $store.state.user.token 不存在时 => 未登录， 通过本地存储中获取数据
  3. $store.state.user.token 不存在时 => 未登录 => 没有本地存储数据 => 不携带token调用查询接口

  => 代码情景
  1. 调用接口 => $store.state.user.token || !getItem('TOUTIAO_MYCHANNELS')
  2. 本地存储 => ELSE
*/
import { setItem } from '../../../utils/storage.js'
import { addUserChannelsAPI, deleteUserChannelsAPI } from '../../../api/index.js'
export default {
  name: 'ChannelEdit',
  props: {
    myChannels: {
      type: Array,
      default: () => []
    },
    active: {
      type: Number,
      default: 0
    },
    allChannels: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    recommendChannels () {
      const list = this.allChannels.filter(channel => {
        return !this.myChannels.find(myChannels => myChannels.id === channel.id)
      })
      console.log(list, '推荐列表')
      return list
    }
  },
  data () {
    return {
      myChannelsClone: this.myChannels,
      isEdit: false // 控制当前频道的编辑状态，默认为关闭
    }
  },
  methods: {
    async onAddChannel (channel) {
      this.myChannelsClone.push(channel)

      // 数据持久化处理
      if (this.$store.state.user.token) {
        // 已登录状态
        try {
          await addUserChannelsAPI({
            channels: [{
              id: channel.id,
              seq: this.myChannelsClone.length
            }]
          })
          this.$toast.success('添加成功')
        } catch (error) {
          console.log(error)
          this.$toast.fail('添加失败')
        }
      } else {
        // 未登录状态 => 把数据存到本地
        setItem('TOUTIAO_MYCHANNELS', this.myChannels)
      }
    },
    async onChannelClick (index, channelId) {
      if (this.isEdit) {
        // 编辑状态，删除频道
        if (index !== 0) {
          this.myChannelsClone.splice(index, 1)
          if (index <= this.active) {
            this.$emit('update-active', this.active - 1, true)
          }
        }

        // 删除数据持久化
        if (this.$store.state.user.token) {
        // 已登录状态
          try {
            await deleteUserChannelsAPI(channelId)
            this.$toast.success('删除成功')
          } catch (error) {
            console.log(error)
            this.$toast.fail('删除失败')
          }
        } else {
        // 未登录状态 => 把数据存到本地
          setItem('TOUTIAO_MYCHANNELS', this.myChannels)
        }
      } else {
        this.$emit('update-active', index)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit-container {
  .edit-btn {
      padding: 0 12px;
    }

  .my-grid {
    :deep(.active_red){
      .van-grid-item__text {
        color: red !important;
      }
    }

    :deep(.channel-item) {
      .van-grid-item__content {
        background-color: #f5f5f6;
      }

      .van-grid-item__text {
        font-size: 12px;
        color: #222222;
        margin-top: 0;
      }

      .van-icon-close {
        position: absolute;
        font-size: 16px;
        top: -7px;
        right: -7px;
        color: #d9d6d9;
      }
    }
  }
  .recommend-grid {
    :deep(.channel-item) {
      .van-grid-item__content {
        white-space: nowrap;
        flex-direction: row;
        background-color: #f5f5f6;
        padding: 16px 4px;
      }

      .van-grid-item__text {
        font-size: 12px;
        color: #222222;
        margin-top: 0;
      }

      .van-icon-plus {
        font-size: 12px;
        margin-right: 2px;
      }
    }
  }
}
</style>
